<template>
  <div class="visitor-alreadyVisited">
    <div class="search-group">
      <div class="input-wrap">
        <div class="label">设备IMEI码:</div>
        <div class="input-item">
          <a-input allowClear :maxLength="30" clearable v-model="queryParam.imei" placeholder="请填写" />
        </div>
      </div>
      <div class="input-wrap">
        <div class="label">设备状态:</div>
        <div class="input-item">
          <a-select allowClear v-model="queryParam.deviceStatus" placeholder="请选择">
            <a-select-option :value="1"> 在线 </a-select-option>
            <a-select-option :value="0"> 离线 </a-select-option>
          </a-select>
        </div>
      </div>
      <div class="input-wrap">
        <div class="label">绑定状态:</div>
        <div class="input-item">
          <a-select allowClear v-model="queryParam.deviceBingdingStatus" placeholder="请选择">
            <a-select-option :value="1"> 已绑定 </a-select-option>
            <a-select-option :value="0"> 未绑定 </a-select-option>
          </a-select>
        </div>
      </div>
      <div class="input-wrap">
        <div class="label">佩戴人员:</div>
        <div class="input-item">
          <a-input allowClear :maxLength="30" clearable v-model="queryParam.wearingPersonName" placeholder="请填写" />
        </div>
      </div>
      <div class="input-wrap">
        <div class="label">所属卫建部门:</div>
        <div class="input-item">
          <a-input allowClear :maxLength="30" clearable v-model="queryParam.department" placeholder="请填写" />
        </div>
      </div>
      <div class="input-wrap">
        <div class="label">创建时间:</div>
        <div class="time-item">
          <start-end-time
            :times="times"
            :showTime="{ format: 'HH:mm:ss' }"
            format="YYYY-MM-DD HH:mm:ss"
            @timeChange="timeChange"
            :resetTime="resetTime"
          ></start-end-time>
        </div>
      </div>
      <div class="btn-wrap">
        <a-button class="searchBtn" @click="searchQuery()" type="primary"> 搜索 </a-button>
        <a-button class="resetBtn" @click="searchReset()" type="primary"> 重置 </a-button>
      </div>
    </div>
    <div>
      <a-table
        ref="table"
        rowKey="id"
        class="tableList"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        @change="handleTableChange"
        :scroll="{ x: 1000 }"
      >
        <template slot="action" slot-scope="records">
          <span class="operation deatil-color" @click="handleDetail(records)">详情</span>
          <span class="operation deatil-color" @click="handleEdit(records)">编辑</span>
          <span class="operation deatil-color" v-if="records.isBinding == '0'" @click="handleBindPatient(records)"
            >绑定患者</span
          >
          <span class="operation deatil-color" v-else @click="handleUnbind(records)">解绑</span>
          <span class="operation deatil-color" @click="handleDelete(records)">删除</span>
        </template>
      </a-table>
    </div>
    <!-- <Detail type="repair" ref="rentDetailRef" /> -->
    <BindingPersonnel ref="bindingPersonnelRef" @editOk="onEditOk" />
    <allMessage
      ref="allMessage"
      :title="confirmTitle"
      :content="confirmContent"
      :publicVisible="publicVisible"
      @cancel="publicVisible = false"
      @tipMessage="tipMessage"
    ></allMessage>
    <Add ref="addRef" @refresh="onRefresh" />
  </div>
</template>

<script>
import startEndTime from '@/components/startEndTime'
import allMessage from '@/components/allMessage'
import { JeecgListMixinNew } from '@/mixins/JeecgListMixinNew'
import { getCommunityList, getDictItemsFromCache, getSubordinateList } from '@/api/api'
// import Detail from './detail.vue'
import { handleSelectChange } from '../../../../utils/util'
import moment from 'moment'
import BindingPersonnel from './bindingPersonnel'
import { postAction } from '@/api/manage'
import Add from './add.vue'

export default {
  name: 'room',
  components: { startEndTime, BindingPersonnel, allMessage, Add },
  mixins: [JeecgListMixinNew],
  props: {
    idCode: {
      type: String,
      default: '',
    },
    villageList: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    idCode(newVal) {
      this.extendParams.policeAgencyId = newVal
    },
  },
  data() {
    return {
      url: {
        list: '/wb/device/page',
      },
      publicVisible: false,
      disableMixinCreated: true,
      columns: [
        {
          title: '序号',
          align: 'center',
          width: 60,
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
          fixed: 'left',
        },
        {
          title: '设备IMEI码',
          dataIndex: 'imei',
          ellipsis: true,
          align: 'center',
          width: 160,
          customRender: (t) => {
            return (
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{t}</span>
                </template>
                <div class="ant-table-row-cell-ellipsis">{t}</div>
              </a-tooltip>
            )
          },
        },
        // {
        //   title: '设备型号',
        //   dataIndex: 'deviceType',
        //   ellipsis: true,
        //   align: 'center',
        //   width: 160,
        //   customRender: (t) => {
        //     return (
        //       <a-tooltip placement="top">
        //         <template slot="title">
        //           <span>{t}</span>
        //         </template>
        //         <div class="ant-table-row-cell-ellipsis">{t}</div>
        //       </a-tooltip>
        //     )
        //   },
        // },
        {
          title: '设备状态',
          dataIndex: 'onLine',
          ellipsis: true,
          align: 'center',
          width: 160,
          customRender: (t, row) => {
            return (
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{t == '1' ? '在线' : '离线'}</span>
                </template>
                {t == '1' ? (
                  <span class="ant-table-row-cell-ellipsis online-status">
                    {row.remainingPower ? `在线（电量${row.remainingPower}%）` : '在线'}
                  </span>
                ) : (
                  <span class="ant-table-row-cell-ellipsis offline-status">{`离线 ${
                    row.remainingPower ? `（电量${row.remainingPower}%）` : ''
                  }`}</span>
                )}
              </a-tooltip>
            )
          },
        },
        {
          title: '绑定状态',
          dataIndex: 'isBinding',
          ellipsis: true,
          align: 'center',
          width: 100,
          customRender: (t) => {
            return (
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{t == '1' ? '已绑定' : '未绑定'}</span>
                </template>
                {t == '1' ? (
                  <span class="ant-table-row-cell-ellipsis binding-status"> 已绑定</span>
                ) : (
                  <span class="ant-table-row-cell-ellipsis binding-status">未绑定</span>
                )}
              </a-tooltip>
            )
          },
        },
        {
          title: '佩戴人员',
          dataIndex: 'psychopathName',
          ellipsis: true,
          align: 'center',
          width: 100,
          customRender: (t) => {
            return (
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{t ? t : '暂无'}</span>
                </template>
                <div class="ant-table-row-cell-ellipsis">{t ? t : '暂无'}</div>
              </a-tooltip>
            )
          },
        },
        {
          title: '身份证号',
          dataIndex: 'psychopathIdCard',
          ellipsis: true,
          align: 'center',
          customRender: (t) => {
            return (
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{t ? t : '暂无'}</span>
                </template>
                <div class="ant-table-row-cell-ellipsis">{t ? t : '暂无'}</div>
              </a-tooltip>
            )
          },
          width: 180,
        },
        {
          title: 'SIM号码',
          dataIndex: 'simNumber',
          ellipsis: true,
          align: 'center',
          customRender: (t) => {
            return (
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{t}</span>
                </template>
                <div class="ant-table-row-cell-ellipsis">{t}</div>
              </a-tooltip>
            )
          },
          width: 160,
        },
        {
          title: '关怀号码 ',
          dataIndex: 'helpCount',
          ellipsis: true,
          align: 'center',
          customRender: (t) => {
            return (
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{t}</span>
                </template>
                <div class="ant-table-row-cell-ellipsis">{t}</div>
              </a-tooltip>
            )
          },
          width: 100,
        },
        {
          title: '所属卫健部门',
          dataIndex: 'departmentName',
          ellipsis: true,
          align: 'center',
          customRender: (t) => {
            return (
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{t}</span>
                </template>
                <div class="ant-table-row-cell-ellipsis">{t}</div>
              </a-tooltip>
            )
          },
          width: 160,
        },
        {
          title: '所属派出所',
          dataIndex: 'policeAgencyName',
          ellipsis: true,
          align: 'center',
          customRender: (t) => {
            return (
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{t}</span>
                </template>
                <div class="ant-table-row-cell-ellipsis">{t}</div>
              </a-tooltip>
            )
          },
          width: 160,
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          ellipsis: true,
          align: 'center',
          width: 180,
          customRender: (t) => {
            return (
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{t}</span>
                </template>
                <div class="ant-table-row-cell-ellipsis">{t}</div>
              </a-tooltip>
            )
          },
        },
        {
          title: '更新时间',
          dataIndex: 'updateTime',
          ellipsis: true,
          align: 'center',
          width: 180,
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'action' },
          ellipsis: true,
          align: 'center',
          width: 240,
          fixed: 'right',
        },
      ],
      project_company_type: [],
      times: {},
      buildingList: [],
      unitList: [],
      floorList: [],
      roomList: [],
      queryParam: {
        companyName: undefined,
        reasonForReporting: undefined,
        printName: undefined,
        mobile: undefined,
      },
      flagTypeList: [],
      extendParams: {},
      reasonForReporting: [],
      bindingPersonnelRef: null,
      confirmTitle: '',
      confirmContent: '确定删除该信息么？',
    }
  },
  inject: ['provideData'],
  mounted() {
    this.flagTypeList = getDictItemsFromCache('flag_type')
    this.reasonForReporting = getDictItemsFromCache('reason_for_reporting')
    this.initPage()
  },
  methods: {
    handleDetail(records) {
      this.$router.push({
        path: '/humanisticConcern/equipmentManagement/detail',
        query: {
          id: records.id,
          psychopathId: records.psychopathId,
          imei: records.imei,
          policeAgencyId: this.provideData().institution.id,
        },
      })
    },
    handleDelete(records) {
      this.publicVisible = true
      this.$refs.allMessage.show(records)
      this.confirmTitle = '删除'
      this.confirmContent = '请确认是否删除？'
    },
    handleUnbind(records) {
      this.publicVisible = true
      this.confirmContent = '请确认是否解绑？'
      this.confirmTitle = '解绑'
      this.$refs.allMessage.show(records)
    },
    searchReset() {
      if (!this.idCode) {
        this.$message.error('请选择机关信息!')
        return
      }
      if (this.resetTime !== undefined) {
        this.resetTime = true
      }
      this.queryParam = {}
      this.loadData(1)
    },
    handleSelectChange,
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    searchQuery() {
      if (!this.idCode) {
        this.$message.error('请选择机关信息!')
        return
      }
      this.loadData(1)
    },
    timeChange(v, index) {
      if (index == 1) {
        this.queryParam.startTime = this.$moment(v).valueOf()
      } else {
        this.queryParam.endTime = this.$moment(v).valueOf()
      }
      if (v == null) {
        this.queryParam.startTime = null
        this.queryParam.endTime = null
      }
    },
    async initPage() {
      try {
        console.log(res)
      } catch (error) {
      } finally {
      }
    },
    handleBindPatient(records) {
      this.$refs.bindingPersonnelRef.show(records)
    },
    async tipMessage(records) {
      if (this.confirmTitle === '删除') {
        let res
        res = await postAction('/wb/device/deleteDeviceInfo', { id: records.id })
        this.$message.success(res.message)
      } else if (this.confirmTitle == '解绑') {
        let res
        res = await postAction('/wb/device/bingding', {
          deviceId: records.id,
          mentalPatientPersonId: records.psychopathId,
          type: 2,
        })
        this.$message.success(res.message)
      }

      this.publicVisible = false
      this.searchQuery()
    },
    onEditOk() {
      this.loadData(1)
    },
    handleEdit(records) {
      this.$refs.addRef.show(records, 'edit')
    },
    onRefresh() {
      this.loadData()
    },
  },
}
</script>

<style lang="less" scoped>
.online-status {
  position: relative;
  &::before {
    content: '';
    width: 6px;
    display: block;
    height: 6px;
    background: #47e829;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -8px;
  }
}
.offline-status {
  position: relative;
  &::before {
    content: '';
    width: 6px;
    display: block;
    left: -8px;
    height: 6px;
    background: #abd5ff;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
}
</style>
